<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            main {
                column-count: 5;/* 规定元素应该被划分的列数 */
                column-gap: 0;/* 规定列间的间隔的像素 */
            }
            .item {
                margin: 2px;
                position: relative;
                counter-increment: bianhao;/* 设置某个选取器每次出现的计数器增量。默认增量是 1 */
            }
            .item img {
                width: 100%;
            }
            /* 定义图片右上角的数字顺序 */
            .item::after {
                content: counter(bianhao);/* 文本为设定计数器内容 */
                position: absolute;
                top: 0px;
                right: 0px;
                width: 20px;
                height: 20px;
                background-color: black;
                line-height: 20px;
                text-align: center;
                font-size: 12px;
                color: white;
                border-bottom-left-radius: 50%;
            }
        </style>
    </head>
    <body>
        <main>
            <div class="item">
                <img src="https://picsum.photos/360/460?random=1" alt="" />
            </div>
            <div class="item">
                <img src="https://picsum.photos/400/460?random=2" alt="" />
            </div>
            <div class="item">
                <img src="https://picsum.photos/370/450?random=3" alt="" />
            </div>
            <div class="item">
                <img src="https://picsum.photos/370/460?random=4" alt="" />
            </div>
            <div class="item">
                <img src="https://picsum.photos/390/410?random=5" alt="" />
            </div>
            <div class="item">
                <img src="https://picsum.photos/380/440?random=6" alt="" />
            </div>
            <div class="item">
                <img src="https://picsum.photos/560/560?random=7" alt="" />
            </div>
            <div class="item">
                <img src="https://picsum.photos/460/360?random=8" alt="" />
            </div>
            <div class="item">
                <img src="https://picsum.photos/360/460?random=9" alt="" />
            </div>
            <div class="item">
                <img src="https://picsum.photos/380/490?random=10" alt="" />
            </div>
            <div class="item">
                <img src="https://picsum.photos/300/460?random=11" alt="" />
            </div>
            <div class="item">
                <img src="https://picsum.photos/560/460?random=12" alt="" />
            </div>
        </main>
        <!-- 缺点是图顺序是从上到下排列再从左到右。没能实现从左到右再从上到下顺序排列。这样不利于最新图片优先显示的原则。所以其只适用在一些简单场景，复杂的瀑布流布局还是得用 js 实现 -->
    </body>
</html>
